<script setup lang="ts">
import { reactive } from 'vue';
import { loginStore } from '../../store/loginStore'
import user from '../../api/user';
import { ElMessage } from 'element-plus'
import { userStore } from '../../store/userStore';

const loginStoreImpl = loginStore();
const userStoreImpl = userStore();

const form = reactive({
  username: '',
  password: ''
})

const login = () => {
  user.checkUser(form.username , form.password)
    .then(res => {
      if (res.data.code == 200 && res) {
        const userInfo = res.data.data.user;
        ElMessage({
          message: '登录成功',
          type: 'success'
        })
        userStoreImpl.user = userInfo;
        loginStoreImpl.hidden();
        window.localStorage.setItem("user" , JSON.stringify(userInfo));
      } else {
        ElMessage({
          message: '登录失败，请检查用户名或密码',
          type: 'warning'
        })
      }
    })
    .finally(() => {
      form.username = '';
      form.password = '';
    })
}


</script>

<template>
  <el-dialog v-model="loginStoreImpl.visable" title="登陆" width="30%">
    <div class="loginContainer">
      <el-form :model="form" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="loginStoreImpl.hidden">取消</el-button>
        <el-button type="primary" @click="login">
          登陆
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.loginContainer{
  padding-right: 50px;
  padding-left: 20px;
}
</style>
